<script>
import { notice } from '@/mixins/notice'
export default {
  name: 'DbDialogContent',
  mixins: [notice({ url: 'rest/api/user/v1/db-notice' })]
}
</script>
<template>
  <div class="dialog-content" :style="borderStyle">
    <div class="dialog-left" :style="rightBack">
      <div class="dialog-title">我的待办消息</div>
      <div class="notice-header-select border-bottom">
        <div class="notice-select-left">
          <el-checkbox v-model="checkedAll" :indeterminate="isIndeterminate" @change="checkedObject">全选</el-checkbox>
        </div>
        <div class="notice-select-left">
          <el-popconfirm
            title="确定删除选中内容吗？"
            @confirm="deleteAll(form.checkList)"
          >
            <el-button slot="reference" type="text" :disabled="disabled" icon="el-icon-delete">删除</el-button>
          </el-popconfirm>
        </div>
        <div class="notice-select-left">
          <el-popconfirm
            title="确定标记选中内容为已读状态吗？"
            @confirm="updateAll(form.checkList)"
          >
            <el-button slot="reference" type="text" icon="el-icon-circle-check" :disabled="disabled">标记已读</el-button>
          </el-popconfirm>
        </div>
      </div>
      <div class="dialog-active">
        <el-scrollbar style="height: 100%;overflow-x: hidden;overflow-y: auto">
          <el-checkbox-group v-model="form.checkList" class="custom-ul" @change="handleCheckedCitiesChange">
            <div v-for="item in noReadList" :key="item.id" class="dialog-ul-li">
              <div class="dialog-li-body">
                <div class="dialog-checkbox">
                  <el-checkbox :label="item.id">&nbsp;</el-checkbox>
                </div>
                <div class="dialog-li-article">
                  <div class="dialog-li-line">{{ item.title }}</div>
                  <div class="dialog-li-button">
                    <span>{{ item.ssxt }}</span>
                    <span>{{ item.sqsj }}</span>
                  </div>
                </div>
              </div>
              <div class="dialog-open" @click="openEntity(item.id,item.url)">
                查看
              </div>
            </div>
          </el-checkbox-group>
        </el-scrollbar>
      </div>
    </div>
    <div class="dialog-right">
      <div class="dialog-title">我的全部已读消息</div>
      <div class="dialog-header border-bottom">
        <div class="notice-select-left">
          <el-input v-model="query.blurry" clearable placeholder="请输入内容" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="queryObject" />
          </el-input>
        </div>
        <div class="notice-select-left">
          <el-checkbox v-model="checkedButtonAll" :indeterminate="isButtonIndeterminate" @change="checkedButtonObject">全选</el-checkbox>
        </div>
        <div class="notice-select-left">
          <el-popconfirm
            title="确定删除选中内容吗？"
            @confirm="deleteAll(checkList)"
          >
            <el-button
              slot="reference"
              type="text"
              :disabled="disabledButton"
              icon="el-icon-delete"
            >删除</el-button>
          </el-popconfirm>
        </div>
      </div>
      <div class="dialog-body">
        <el-checkbox-group v-model="checkList" style="flex-flow: row wrap" @change="handleCheckedButtonChange">
          <div v-for="item in readList" :key="item.id" class="dialog-body-ul-li">
            <div class="dialog-li-body">
              <div class="dialog-checkbox">
                <el-checkbox :label="item.id">&nbsp;</el-checkbox>
              </div>
              <div class="dialog-li-article">
                <div class="dialog-li-line">{{ item.title }}</div>
                <div class="dialog-li-button">
                  <span>{{ item.ssxt }}</span>
                  <span>{{ item.sqsj }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-checkbox-group>
      </div>
      <div class="dialog-header">
        <el-pagination
          :current-page="query.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dialog-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  .dialog-left {
    padding: 0 10px;
    box-sizing: border-box;
    width: 350px;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    .notice-header-select {
      width: 100%;
      height: 50px;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      .notice-select-left {
        padding: 0 5px;
        box-sizing: border-box;
      }
    }
    .notice-header-select.border-bottom {
      border-bottom: 1px solid #E4E7ED;
    }
    .dialog-active {
      flex: 1 1;
      width: 100%;
      overflow: hidden;
    }
  }
  .dialog-right {
    flex: 1 1;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    .dialog-body {
      width: 100%;
      flex: 1 1;
    }
    .dialog-header {
      width: 100%;
      height: 50px;
      line-height: 50px;
      justify-content: space-between;
      display: flex;
      .notice-select-left {
        padding: 0 5px;
        box-sizing: border-box;
      }
    }
    .dialog-header.border-bottom {
      border-bottom: 1px solid #E4E7ED;
    }
  }
}
.dialog-title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-weight: 700;
  font-size: 1.1rem;
}
.dialog-ul-li {
  width: 100%;
  height: 100px;
  padding: 5px;
  box-sizing: border-box;
  position: relative;
}
.dialog-body-ul-li {
  position: relative;
  width: 33.33%;
  height: 100px;
  padding: 5px;
  box-sizing: border-box;
}
.dialog-li-body {
  width: 100%;
  height: 100%;
  padding: 10px;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  display: flex;
  flex-flow: row nowrap;
  .dialog-checkbox {
    width: 25px;
    text-align: center;
    line-height: 62px;
  }
  .dialog-li-article {
    flex: 1 1;
    height: 100%;
    .dialog-li-line {
      width: 100%;
      height: 50px;
      line-height: 25px;
      font-size: 0.9rem;
      font-weight: 700;
    }
    .dialog-li-button {
      width: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 0.8rem;
      display: flex;
      font-weight: 500;
      justify-content: space-between;
      color: #909399;
    }
  }
}
.dialog-open {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 20px;
  line-height: 20px;
  border-radius: 0 4px 0 4px;
  background-color: #0a84ff;
  color: #ffffff;
  font-size: 0.8rem;
  text-align: center;
  cursor: pointer;
}
.gren {
  background-color: #95d475;
}
.gren-1 {
  background-color: #f3d19e;
}
.gren-2 {
  background-color: #eebe77;
}
.gren-3 {
  background-color: #f89898;
}
.gren-4 {
  background-color: #a0cfff;
}
.gren-5 {
  background-color: #f89898;
}
.gren-6 {
  background-color: #409EFF;
}
.gren-7 {
  background-color: #E6A23C;
}
.el-checkbox-group {
  display: flex;
}
.el-checkbox-group.custom-ul {
  display: flex;
  flex-flow: column nowrap;
}
</style>
